
<template>
  <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
    <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
      {{ city }}
    </el-checkbox>
  </el-checkbox-group>
  
  <el-select 
  placeholder="--请选择--" 
  style="width: 140px" 
  :popper-append-to-body="false"
  :teleported="false"
  :automatic-dropdown="false" ref> 
    <el-option value="1" label="苹果" />
    <el-option value="2" label="梨子" />
    <el-option value="3" label="香蕉" />
  </el-select>
     
  <el-select
    v-model="selected"
    placeholder="Select"
    style="width: 240px"
    :popper-append-to-body="false"
    :teleported="false"
  >
    <el-option
      v-for="item in data.options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>

  <label for="hobby">爱好：</label>               
  <select id="hobby" name="hobby">
      <option value="sing">唱</option>
      <option value="jump">跳</option>
      <option value="rap">rap</option>
      <option value="basketball" selected>篮球</option>
      <option value="swimming">游泳</option>
      <option value="trip">旅游</option>
  </select>
</template>

<script lang="ts" setup>
import { ref,reactive} from 'vue'

const checkedCities = ref(['Shanghai', 'Beijing']);
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
const selected = ref('2');
const data = reactive({
  options: [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    }
  ]
});


</script>

<style scoped>

</style>

    
